<template>
	<view class="">
		<view class="page-titel">
			 <text>协会活动</text>
		</view>
		<view class="card-box">
			<view class="card-list">
				<view class="card" v-for="(item,index) in list" :key="index" :style="{border:index==0?0:''}"
					@click="jumpDetail(item.associationActivityId)">
					<view class="card-l">
						<view class="titel">
							{{item.activityTitle}}
						</view>
						<view class="info">
							<view class="address">
								<image src="../../../static/home_address.png" mode=""></image>
								<text>{{item.activityAddress}}</text>
							</view>
							<view class="time">{{item.startTime}}</view>
						</view>

					</view>
					<view class="card-r">
						<image v-if="item.activityCover" :src="item.activityCover" mode=""></image>
						<image v-else src="../../../static/logo.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import api from 'api/modules/dynamic.js';
	import util from '../../../util/index.js'
	export default {
		data() {
			return {
				list: [],
				pageParams: {
					pageSize: 10,
					pageNum: 1
				}
			}
		},
		onLoad() {
			this.getData()
		},
		methods: {
			getData(params) {
				api.getActivityPage(params ? params : this.pageParams).then(res => {
					if (res.data.length) {
						res.data.forEach(item => {
							item.startTime = util.formatDate(item.startTime)
						})
					}
					this.list = res.data
				})
			},
			jumpDetail(id) {
				uni.navigateTo({
					url: `Detail?type=activity&id=${id}`
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.card-box {
		padding-left: 24rpx;



		.card-list {
			.card {
				border-top: 1rpx solid #D8D8D8;
				padding: 20rpx 24rpx 20rpx 0;
				display: flex;
				justify-content: space-between;
				padding: ;

				.card-l {
					position: relative;
					flex: auto;
					width: calc(100% - 168rpx);

					.titel {
						font-size: 32rpx;
						font-weight: 500;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
					}

					.info {
						display: flex;
						justify-content: space-between;
						font-size: 24rpx;
						font-weight: 400;
						color: #666666;
						position: absolute;
						bottom: 0;
						width: 100%;

						.address {
							max-width: 200rpx;
							overflow: hidden; //超出的文本隐藏
							text-overflow: ellipsis; //溢出用省略号显示
							white-space: nowrap; //溢出不换行

							image {
								width: 24rpx;
								height: 24rpx;
								margin-right: 8rpx;
							}
						}

						.time {
							margin-right: 40rpx;
						}
					}

				}

				.card-r {
					min-width: 168rpx;
					max-width: 168rpx;
					height: 134rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}



		}
	}
</style>
